<template>
  <div>
    <div class="content">
        <h1>文件列表 </h1>
         <div class="contentTit">
            <div class="contentSearch">
                <el-input v-model="fileNameSearch" placeholder="请输入文件名搜索"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="fileSearch" size="small" style="margin-left:20px">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="small" style="margin-left:20px" @click="cleanSeach">清空搜索（还原）</el-button>
            </div>
            <el-button style="margin-left:35%" type="primary" size="small" @click="fileUpload">文件上传<i class="el-icon-upload el-icon--right"></i></el-button>
         </div>
        
        <div class="fileList">
            <el-table
            :data="tableData"
            style="width: 60%">
            <el-table-column
                prop="fileName"
                label="文件名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date"
                label="上传日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="Uploader"
                label="上传人">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="fileChange(scope.row)"  size="mini">修改</el-button>
                    <el-button type="text" @click="fileDel(scope.row)"  size="mini">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 文件上传弹窗 -->
    <el-dialog
    title="文件上传"
    :visible.sync="fileUploadShow"
    width="30%"
    :before-close="handleClose">
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fileUploadShow = false">取 消</el-button>
                <el-button type="primary" @click="fileUploadShow = false">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 修改文件名弹窗 -->
    <el-dialog
    title="修改文件名"
    :visible.sync="fileChangeShow"
    width="30%"
    :before-close="handleClose">
            <el-input v-model="value" placeholder="文件名不能为空"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fileChangeShow = false">取 消</el-button>
                <el-button type="primary" @click="fileChangeConfirm">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
    data () {
        return {
            fileUploadShow:false,
            fileChangeShow:false,
            updateIndex:'',
            value:'',
            fileNameSearch:'',
            tableData: [
                {fileName: '垃圾桶今天没有垃圾',date: '2021-12-02',Uploader: '陈小刀',num:1}, 
                {fileName: '御书房',date: '2021-12-02',Uploader: '赵小龙',num:2}, 
                {fileName: '游戏很好玩',date: '2021-12-02',Uploader: '陈小刀',num:3}, 
                {fileName: '千万别点开',date: '2021-12-02',Uploader: '王小虎',num:4}, 
            ],
            tableDataFirst: [
                {fileName: '垃圾桶今天没有垃圾',date: '2021-12-02',Uploader: '陈小刀',num:1}, 
                {fileName: '御书房',date: '2021-12-02',Uploader: '赵小龙',num:2}, 
                {fileName: '游戏很好玩',date: '2021-12-02',Uploader: '陈小刀',num:3}, 
                {fileName: '千万别点开',date: '2021-12-02',Uploader: '王小虎',num:4}, 
            ],
            tableDataNew:[],
        }
    },
    mounted () {
       
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                done();
                })
                .catch(_ => {});
        },
    
        //点击文件上传按钮
       fileUpload(){
           this.fileUploadShow=true
       },
       //点击修改按钮
       fileChange(row){
           this.value=row.fileName;
           this.updateIndex = row.num;
           this.fileChangeShow=true;
       },
       //修改确认
       fileChangeConfirm(){
        //    this.value
            this.tableData.forEach(item => {
                if(item.num == this.updateIndex){
                    item.fileName = this.value
                }
            });
            this.fileChangeShow = false
       },
       //点击删除按钮
       fileDel(row){
           this.tableDataNew=[]
           alert("您删除了'"+row.fileName+"'这个文件");
            this.tableData.forEach(item => {
                if(item.fileName != row.fileName){
                    this.tableDataNew.push(item)
                }
                this.tableData = this.tableDataNew
                this.tableDataFirst = this.tableDataNew
            });
       },
       //搜索按钮
       fileSearch(){
           this.tableDataNew=[]
           this.tableData.forEach(item => {
                if((item.fileName.indexOf(this.fileNameSearch)) !=-1){
                    this.tableDataNew.push(item)
                }
            });
            this.tableData = this.tableDataNew
       },
       //清空搜索(还原)
       cleanSeach(){
           this.fileNameSearch = null
           this.tableData =this.tableDataFirst
       }
    },

}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    
}
.contentTit{
    width: 40%;
    margin-left: 30%;
    display: flex;
    justify-content: space-between;
}
.contentSearch{
    display: flex;
    justify-content: space-between;
}
.fileList{
    height: 30%;
    width: 40%;
    margin-left: 30%;
    border:1px solid #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
